---
title: ComposerPrimitive
---

The user interface to add new messages or edit existing ones.

import { Callout } from "fumadocs-ui/components/callout";

import { ParametersTable, KeyboardTable } from "@/components/docs";
import { Code } from "@radix-ui/themes";

<Callout>
  **Dual Use!** A Composer placed directly inside a `Thread` will compose new
  messages. A Composer placed inside a `Message` will edit that message.
</Callout>

## Anatomy

```tsx
import { ComposerPrimitive } from "@assistant-ui/react";

// creating a new message
const Composer = () => (
  <ComposerPrimitive.Root>
    <ComposerPrimitive.Attachments />
    <ComposerPrimitive.AddAttachment />
    <ComposerPrimitive.Input />
    <ComposerPrimitive.Send />
  </ComposerPrimitive.Root>
);

// editing an existing message
const EditComposer = () => (
  <ComposerPrimitive.Root>
    <ComposerPrimitive.Input />
    <ComposerPrimitive.Send />
    <ComposerPrimitive.Cancel />
  </ComposerPrimitive.Root>
);
```

## API Reference

### Root

Containts all parts of the composer.

This primitive renders a `<form>` element unless `asChild` is set.

<ParametersTable
  type="ComposerRootProps"
  parameters={[
    {
      name: "asChild",
    },
  ]}
/>

### Input

The text input field for the user to type a new message.

This primitive renders a `<textarea>` element unless `asChild` is set.

<ParametersTable
  type="ComposerPrimitiveInputProps"
  parameters={[
    {
      name: "asChild",
    },
  ]}
/>

#### Keyboard Shortcuts

<KeyboardTable
  data={[
    {
      keys: ["Enter"],
      description: "Sends the message.",
    },
    {
      keys: ["Escape"],
      description: "Sends a cancel action.",
    },
  ]}
/>

### Send

The button to send the message.

This primitive renders a `<button>` element unless `asChild` is set.

<ParametersTable
  type="ComposerPrimitiveSendProps"
  parameters={[
    {
      name: "asChild",
    },
    {
      name: "multiple",
      type: "boolean | undefined",
      description: "Allow selecting multiple attachments at the same time.",
      default: "true",
    },
  ]}
/>

### Cancel

Sends a cancel action.

In edit composers, this action exits the edit mode.  
In thread composers, this action stops the current run.

This primitive renders a `<button>` element unless `asChild` is set.

<ParametersTable
  type="ComposerPrimitiveCancelProps"
  parameters={[
    {
      name: "asChild",
    },
  ]}
/>

### Attachments

Renders attachments. This primitive renders a separate component for each attachment.

<ParametersTable
  type="ComposerPrimitiveAttachmentsProps"
  parameters={[
    {
      name: "components",
      type: "ComposerAttachmentsComponents",
      description: "The component to render for each attachment.",
      children: [
        {
          type: "ComposerPrimitiveAttachmentsProps['components']",
          parameters: [
            {
              name: "Image",
              type: "ComponentType",
              description: "The component to render for each image attachment.",
            },
            {
              name: "Document",
              type: "ComponentType",
              description:
                "The component to render for each document attachment.",
            },
            {
              name: "File",
              type: "ComponentType",
              description: "The component to render for each file attachment.",
            },
            {
              name: "Fallback",
              type: "ComponentType",
              description: "The component to render for each attachment type.",
            },
          ],
        },
      ],
    },
  ]}
/>

### AddAttachment

Renders a button to add an attachment.

This primitive renders a `<button>` element unless `asChild` is set.

<ParametersTable
  type="ComposerPrimitiveAddAttachmentProps"
  parameters={[
    {
      name: "asChild",
    },
  ]}
/>

### If

Renders children if a condition is met.

<ParametersTable
  type="UseComposerIfProps"
  parameters={[
    {
      name: "editing",
      required: false,
      type: "boolean | undefined",
      description: "Render children if the message is being edited.",
    },
  ]}
/>

```tsx
<Composer.If editing>{/* rendered if message is being edited */}</Composer.If>
```
